<template>
    <div>
        <div class="upload">
            <img src="../../assets/images/image.png" class="placeholder" :style="{width:width,height:width}" @click="clickBtn" v-if="!path"/>
            <img :src="hasHttp?path:imageApi+path" class="img" :style="{width:width,height:width}" @click="clickBtn" v-else/>
            <input type="file" :ref="name" class="btn_upload" @change="uploadImg"/>

            <div class="handle" v-if="path">
                <span class="preview" @click="enlarge = true">预览</span>
                <span class="delete" @click="deleteImg">删除</span>
            </div>
        </div>
        <div class="mask" v-show="enlarge" @click="enlarge = false">
            <img :src="hasHttp?path:imageApi+path" />
        </div>
    </div>
</template>
<script>
import {upload,deletePic} from '@/api/file'
export default {
    data(){
        return{
            imageApi:process.env.VUE_APP_IMAGE_BASE_URL,
            enlarge:false,
        }
    },
    props:{
        path:{
            type:String,
            default:''
        },
        name:{
            type:String,
            default:'fileBtn'
        },
        width:{
            type:String,
            default:'140px'
        },
        hasHttp:{
            type:Boolean,
            default:false
        }
        
    },
    mounted(){
        window.addEventListener('keydown',e=>{
            if(e.key == "Escape"){
                this.enlarge = false;
            }
        })
    },
    methods:{
        clickBtn(e){
            this.$refs[this.name].click();
            console.log(window.event.target.files)
        },
        uploadImg(e){
            
            let files = window.event.target.files[0];
            console.log(files)
            let formData = new FormData();
            formData.append('file',files)
            console.log(formData)
            upload(formData).then(res=>{
                this.$emit('imgChange',res.data.path)
            })
        },
        deleteImg(e){
            this.$confirm('确定要删除已上传的图片吗','提示',{
                type: 'warning'
            }).then(()=>{
                if(this.hasHttp){
                    this.$emit('imgChange','')
                }else{
                    deletePic(this.path).then(res=>{
                        this.$message.success('删除成功')
                        this.$emit('imgChange','')
                    })
                }
                
            })
        },
    }
}
</script>
<style scoped>
    .upload{
        display: flex;
        align-items: center;
    }
    .upload>img{
        width: 100%;
    }
    .btn_upload{
        display: none;
    }
    .handle{
        margin-left: 10px;
    }
    .handle>span{
        margin: 0 4px;
        cursor: pointer;
    }
    .preview{
        color: #3e89fa;
    }
    .delete{
        color: #f74d4a;
    }
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        display: flex;
        background: rgba(0, 0, 0, 0.7);
        cursor: zoom-out;
    }
    .mask>img{
        width: 25%;
        margin: auto;
    }
</style>